<template>
  <view class="echarts-wrap" style="height: 520rpx">
    <mpvue-echarts
      @onInit="lineInit1"
      canvasId="category3"
      ref="lineChart1"
      @sendImg="sendImg"
    />
    <image v-if="tempFilePath" :src="tempFilePath" class="imgCanvas"></image>
  </view>
</template>

<script>
import * as echarts from '../../charts/echarts.min5.2.0.js';
import mpvueEcharts from '../../charts/echarts.vue';
let lineOptionA = {
  type: 'category',
  animation: false,
  color: ['#066BFF'],
  barWidth: 18,
  // legend: {
  //   data: ["职位动态数"],
  //   bottom: "1%",
  //   textStyle: {
  //     color: "#333",
  //     fontSize: 14,
  //     lineHeight: 18,
  //   },
  //   itemHeight: 10,
  // },
  grid: {
    x: 60,
    x2: 15,
    y: 30,
    y2: 42
  },
  calculable: false,
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E4EDF8'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#aaaaaa'
        },
        interval: 0
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#E4EDF8'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#aaaaaa'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#E4EDF8'
        }
      }
    }
  ],
  series: [
    {
      name: '月薪',
      type: 'bar',
      smooth: true,
      symbol: 'none',
      label: {
        show: true,
        position: 'top', // 或者 top
        formatter: '￥{c}', // 显示当前 y 轴的值
        offset: [0, -5],
        color: '#0169FF',
        fontWeight: 'bold',
        fontFamily: 'PingFang-SC-Heavy, PingFang-SC',
        fontSize: 11 // 设置字号为 12px
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#589BFD' },
          { offset: 1, color: '#BBDEFF' }
        ]),
        // 配置柱状图的圆角
        barBorderRadius: [3, 3, 0, 0]
      },
      data: []
    }
  ]
};
export default {
  components: {
    mpvueEcharts
  },
  props: {
    salaryEducationChart: {
      type: Object,
      default: () => {}
    },
    showRegion: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lineOption1: { ...lineOptionA },
      tempFilePath: null
    };
  },
  mounted() {
    this.chartCreate();
  },
  methods: {
    sendImg(img) {
      this.tempFilePath = img;
    },
    chartCreate(val) {
      if (val && val.dataX) {
        this.lineOption1.xAxis[0].data = val.dataX;
        this.lineOption1.series[0].data = val.dataY;
        this.$refs.lineChart1.init();
      }
    },
    lineInit1(e) {
      let { width, height } = e;
      let canvas = this.$refs.lineChart1.canvas;
      echarts.setCanvasCreator(() => canvas);
      let lineChart1 = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(lineChart1);
      lineChart1.setOption(this.lineOption1);
      lineChart1.resize();
      lineChart1.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 3,
        position: ['50%', '10%']
      });
      this.$refs.lineChart1.setChart(lineChart1);
      return lineChart1;
    }
  },
  watch: {
    salaryEducationChart: {
      handler(val) {
        this.chartCreate(val);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped>
.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
  z-index: 0;
  position: relative;
}
.imgCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
